<!DOCTYPE html>
<html>
<head>
    <title>EaselJS: Simple Transform Example</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

    <script type="text/javascript">
        var img;
        var stage;
        var angle;

        function init() {
        	if (window.top != window) {
        		document.getElementById("header").style.display = "none";
        	}

            angle = 0;
            img = new Image();
            img.onload = handleImageLoad;
            img.src = "assets/rotateDemoBot.png";
        }

        function stop() {
			createjs.Ticker.removeEventListener("tick", tick);
        }

        function handleImageLoad() {
            var canvas = document.getElementById("testCanvas");
            stage = new createjs.Stage(canvas);
            stage.autoClear = true;
            bmp = new createjs.Bitmap(img);
            bmp.regX = img.width >> 1;
            bmp.regY = img.height >> 1;
            bmp.x = canvas.width - (img.width/2)>>1;
            bmp.y = 140+canvas.height - (img.height/2)>>1;
            bmp.scaleX = bmp.scaleY = 0.1;
            stage.addChild(bmp);
            stage.update();

			createjs.Ticker.addEventListener("tick", tick);
        }

        function tick(event) {
            angle += 0.025;
            var value = (Math.sin(angle) * 360);

            bmp.setTransform (bmp.x , bmp.y , bmp.scaleX , bmp.scaleY , value/2 , bmp.skewX , bmp.skewY , bmp.regX , bmp.regY );
            bmp.scaleX = bmp.scaleY = ((value)/360) + 0.25;
            stage.update(event);
        }

    </script>
</head>
<body onload="init()">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Simple Transform Example</h1>
	    <p>A simple example of EaselJS transformations.</p>
	</header>

    <canvas id="testCanvas" width="960" height="400"></canvas>

</body>
</html>